<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>提交订单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="../css/place_order.css" />
	<link rel="stylesheet" href="../css/base.css" />
	<link rel="stylesheet" href="../css/zhifu.css">


	<style>
		.payPwdBox {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 0;
			display: none;
			z-index: 11;
		}

		.payPwd {
			width: 80%;
			height: 38%;
			position: fixed;
			left: 10%;
			top: 21%;
			background-color: #fff;
			border-radius: 10px;
			z-index: 123;
		}

		.payPwd p.title {
			width: 100%;
			height: .44rem;
			line-height: .44rem;
			text-align: center;
			border-bottom: 1px solid #e6e6e6;
			font-size: .16rem;
			color: #252525;
		}

		.payPwd .pay_type,
		.pay_num {
			width: 100%;
			height: .44rem;
			line-height: .44rem;
			text-align: center;

		}

		.pwdBox {
			width: 88%;
			height: .45rem;
			background-color: #ffffff;
			border-radius: 5px;
			margin: 0 auto;
			position: relative;
		}

		.pwdBox input[type=password] {
			caret-color: transparent;
			/*设置输入框光标颜色透明，达到隐藏光标的效果*/
			height: 100%;
			width: 16.6%;
			float: left;
			line-height: .44rem;
			text-align: center;
			font-size: .12rem;
			border: 1px solid #999999;
			border-left: none;
		}

		.pwdBox input[type=password]:first-child {
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
			border-left: 1px solid #999999;
		}

		.pwdBox input[type=password]:last-child {
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
		}

		.payPwd .sure,
		.payPwd .cancel {
			display: inline-block;
			width: 50%;
			height: .44rem;
			line-height: .44rem;
			text-align: center;
			border-top: 1px solid #e6e6e6;
			font-size: .18rem;
			color: #252525;
			position: absolute;
			bottom: 0;
		}

		.payPwd .cancel {
			right: 0;
			border-left: 1px solid #e6e6e6;
		}


		.confirm {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 0;
			/*display: none;*/
			z-index: 11;
		}

		.confirm .box {
			width: 60%;
			height: 1rem;
			background-color: #ffffff;
			border-radius: 10px;
			margin: 0 auto;
			position: relative;
			top: 35%;
		}

		.confirm .box h4 {
			width: 100%;
			height: .45rem;
			line-height: .55rem;
			background: #ffffff;
			text-align: center;
			border-radius: 10px;
			font-weight: normal;
		}

		.little_box .sure,
		.little_box .cancel {
			display: inline-block;
			width: 50%;
			height: .44rem;
			line-height: .44rem;
			text-align: center;
			border-top: 1px solid #e6e6e6;
			font-size: .14rem;
			color: #34B7EB;
			position: absolute;
			bottom: 0;
		}

		.little_box .cancel {
			right: 0;
			border-left: 1px solid #e6e6e6;
		}

		.address-vif-ul {
			overflow: hidden;
		}

		.address-vif-ul li {
			overflow: hidden;
			height: .3rem;
			line-height: .3rem;
			width: 94%;
			margin: 0 auto;
			text-overflow: ellipsis;
			white-space: nowrap;
			/*border: 1px solid red;*/
			color: #000;
		}

		.address-vif-ul li span {
			display: block;
			float: left;
			color: #000;
			white-space: nowrap;
			overflow: hidden;
			width: 45%;
		}
		/*******************/
		.footerMask{
			position: fixed;
			display: none;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
		}
		.footerMask li{
			height: .5rem;
			line-height: .5rem;
			padding: 0 .05rem;
			border-bottom: 1px solid #ccc;
		}
		.footerMaskT img{
			width: .34rem;
			height: .34rem;
			display: inline-block;
			margin-right: .05rem;
		}
		.let1{
			width: .34rem;
			height: .34rem;
			display: inline-block;
			margin-right: .05rem;
		}
		.to{
			float: right;
			width: .24rem;
			height: .24rem;
			margin-top: .12rem;
			display: none;
		}
		.active .to{
			display: block;
		}
		.choiceCard{
			font-size: .20rem;
			text-align: center;
			height: .5rem;
			line-height: .5rem;
			border-bottom: 1px solid #ccc;
			border-top: 1px solid #ccc;
		}
		.choiceCard i{
			float: right;
			margin-right: 0.15rem;
		}

		.btn_zf{
			font-size: .16rem;
			padding: 0 .15rem;
			margin-top: .1rem;

		}
		.btn_zf span{
			display: block;
			text-align: center;
			height: .5rem;
			line-height: .5rem;
			background-color: #e73e40;
			border-radius: 0.05rem;
			color: #fff;
		}
		.verification input{
			font-size: .14rem;
			width: 40%;
		}
		.verification{
			font-size: .16rem;
		}
		.verification span{
			float: right;
			width: 0.96rem;
			font-size: 0.12rem;
			height: 0.32rem;
			background: #F59394;
			color: #ffffff;
			text-align: center;
			border-radius: 0.05rem;
			line-height: 0.32rem;
			margin-top: 0.08rem;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="header">
			<a href="shopcar/indexShop.html"><img src="../img/g_next.png" alt="" /></a>
			提交订单
		</div>
		<div class="placeOrder_address">
			<img class="add_address" src="../img/G_tixian_tj.png" /><span class="addressplace">{{span}}</span>
			<div class="addrss-vif" v-if="areyouok" style="overflow: hidden; z-index: 100000;">
				<ul class="address-vif-ul">
					<li>
						<span>姓名：{{addressList.username}}</span>
						<span style="float: right;">手机号：{{addressList.userPhone}}</span>
					</li>
					<li style="margin-bottom: 0.1rem;">收货地址：{{addressList.userAddressName}}</li>
				</ul>
			</div>
		</div>
		<div class="placeOrder_main" style="padding-bottom: 0px;">
			<div v-for="item2 in list">
				<div class="placeOrder_main_top">
					<img class="dianpu" src="../img/g_dianpu.png" alt="" />
					<span class="name">平台</span>
					<img class="right" src="../img/icon-right.png" alt="" />
				</div>
				<div class="placeOrder_main_inner" v-for="item2">
					<img class="shangpin" :src="ImageUrl + item2.goodsImg" alt="" />
					<div class="txt">
						<p class="name">{{item2.goodsName}}</p>
						<p class="price">
							<span class="num">X{{item2.cartNum}}</span>
							<span class="money">￥{{item2.shopPrice}}</span>
						</p>
					</div>
				</div>
			</div>
			<p class="shangpin_money">
				<span class="title">商品总金额</span>
				<span class="num">￥{{sumMoney}}</span>
			</p>
		</div>
		<div class="placeOrder_bottom">
			<span class="zong_price">￥{{sumMoney}}</span>
			<input @click="TJ_btn" class="TJ_btn" type="button" value="提交订单" name="" id="" />
		</div>
		<!--浮动层-->
		<!--<div class="ftc_wzsf">-->
			<!--<div class="srzfmm_box">-->
				<!--<div class="qsrzfmm_bt clear_wl">-->
					<!--<img src="../img/xx_03.jpg" class="tx close fl">-->
					<!--<span class="fl">请输入支付密码</span></div>-->
				<!--<div class="zfmmxx_shop">-->
					<!--<div class="mz"></div>-->
					<!--<div class="zhifu_price"></div>-->
				<!--</div>-->
				<!--<ul class="mm_box">-->
					<!--<li></li>-->
					<!--<li></li>-->
					<!--<li></li>-->
					<!--<li></li>-->
					<!--<li></li>-->
					<!--<li></li>-->
				<!--</ul>-->
			<!--</div>-->
			<!--<div class="numb_box">-->
				<!--<div class="xiaq_tb" style="height: 0.2rem;clear: both;">-->
					<!--<img src="../img/jftc_14.jpg" style="height: 0.1rem;float: left;margin-left: 46%;">-->
				<!--</div>-->
				<!--<ul class="nub_ggg">-->
					<!--<li><a href="javascript:void(0);" class="zf_num">1</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zj_x zf_num">2</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zf_num">3</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zf_num">4</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zj_x zf_num">5</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zf_num">6</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zf_num">7</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zj_x zf_num">8</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zf_num">9</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zf_empty">清空</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zj_x zf_num">0</a></li>-->
					<!--<li><a href="javascript:void(0);" class="zf_del">删除</a></li>-->
				<!--</ul>-->
			<!--</div>-->
			<!--<div class="hbbj"></div>-->
		<!--</div>-->
		<div class="footerMask">
			<div class="choiceCard">
				选择支付方式
				<i @click="close">X</i>
			</div>
			<ul class="footerMaskO" >
				<!--<li class="active">-->
					<!--<img class="let1" src="../img/g_tixian_afb.png" alt="" >-->
					<!--<span>支付宝</span>-->
					<!--<img class="to" src="../img/icon-true.png" alt="">-->
				<!--</li>-->
				<!--<li>-->
					<!--<img class="let1"  src="../img/g_tixian_wx.png" alt="">-->
					<!--<span>微信</span>-->
					<!--<img class="to" src="../img/icon-true.png" alt="">-->
				<!--</li>-->
			</ul>
			<ul class="footerMaskO">
				<li :class="currentTab == 0 ?'active':''" @click="footerMaskIte(0,0)">
					<img class="let1" src="../img/g_tixian_afb.png" alt="" >
					<span>支付宝</span>
					<img class="to" src="../img/icon-true.png" alt="">
				</li>
				<li :class="currentTab == -1 ?'active':''" @click="footerMaskIte(-1,-1)">
					<img class="let1" src="../img/g_tixian_wx.png" alt="" >
					<span>微信</span>
					<img class="to" src="../img/icon-true.png" alt="">
				</li>
				<!-- <li v-for="(index,i) in BankList" :data-id="index.bankCardId" :class="currentTab == i+1 ?'active':''" @click="footerMaskIte(i+1,index.bankCardId)">
					<img class="let1" :src="index.bankImge" alt="">
					<span>{{index.bankName}}({{index.accNo}}) </span>
					<img class="to" src="../img/icon-true.png" alt="">
				</li> -->
			</ul>
            <ul>
				<!-- <li class="footerMaskT">
					<img src=../img/add.png alt="">
					<span>添加银行卡</span>
				</li> -->
				<li  @click="btn_zf" class="btn_zf">
					<span>提交</span>
				</li>
			</ul>
		</div>
		<!--<div class="ipt">-->
			<!--<div class="verification padding">-->
				<!--<i>验证码</i>-->
				<!--<input type="text" class="verificationNum" placeholder="请输入短信验证码">-->
				<!--<span @click="phoneVeation" class="phoneVeation">发送验证码</span>-->
			<!--</div>-->
		<!--</div>-->
	</div>

</body>
<script src="../js/jquery-2.2.3.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/rem.js"></script>
<script src="shopcar/js/vue.min.js"></script>
<script src="../js/vue-resource.min.js"></script>
<script>
	new Vue({
        el: '#app',
        data: {
            list: [],
            sumMoney: '',
            span: '添加收货地址',
            areyouok: false,
            addressList: {},
            BankList: [],
            currentTab: 996,
			btn:1,
            bankCardId:'',
			orderunique:'',
        },
        mounted: function () {

            console.log(localStorage.getItem('addressId'));
            if (localStorage.getItem('addressId')) {
                this.$http.post(SURL + '/api/xlsusersaddress/selectAddressByAddressId', {
                    id: localStorage.getItem('addressId')
                }, {
                    emulateJSON: true
                }).then(res => {
                    var resdata = res.body.data;
                    $('.placeOrder_address').attr('address', resdata.addressId)
                    this.span = "修改收货地址"
                    var addressList = {
                        username: resdata.userName,
                        userPhone: resdata.userPhone,
                        userAddressName: resdata.userAddressName,
                    }
                    this.addressList = addressList;
                    this.areyouok = true;
                })
            }
            this.$nextTick(function () {
                var money = 0;
                var _this = this;
                this.$http.post(SURL + '/api/xlscart/gotoPay', {
                    userId: localStorage.getItem('userId')
                }, {
                    emulateJSON: true
                }).then(function (res) {
                    var _data = res.body.data;
                    this.list = _data.goodsMapList;
					
                    for (var ii = 0; ii < this.list.length; ii++) {
                        var item2 = this.list[ii];
                        var sum = item2.cartNum * item2.shopPrice;
                        money = money + sum;
                    }
                    var item3 = this.list.length;
                    if (item3 > 1) {
                        alert('一次只能买一个商品')
                        location.href = 'shopcar/indexShop.html'
                    }
                    this.sumMoney = money;
                })
                $(".footerMaskT").click(function () {
                    window.location.href = './aad/addBankCard.html'
                })
                // 	//数字显示隐藏
                // 	$(".xiaq_tb").click(function () {
                // 		$(".numb_box").slideUp(500);
                // 	});
                // 	$(".mm_box").click(function () {
                // 		$(".numb_box").slideDown(500);
                // 	});
                // 	//----
                // 	var i = 0;
                // 	$(".nub_ggg li .zf_num").click(function () {
                // 		if (i < 6) {
                // 			$(".mm_box li").eq(i).addClass("mmdd");
                // 			$(".mm_box li").eq(i).attr("data", $(this).text());
                // 			i++
                // 			if (i == 6) {
                // 				//   setTimeout(function(){
                // 				var data = "";
                // 				$(".mm_box li").each(function () {
                // 					data += $(this).attr("data");
                // 				});
                // 				var aaaaa = /^[\u4e00-\u9fa5\w]{0,20}$/;
                // 				var testBeizhu = $('.beizhuInp').val();
                // 				if (!aaaaa.test(testBeizhu)) {
                // 					alert('备注字数限制为20以内');
                // 				} else {
                // 					var _josn = {
                // 						orderunique: sessionStorage.getItem('ddh'),
                // 						orderRemarks: '',
                // 						userId: localStorage.getItem('userId'),
                // 						paypassword: data
                // 					}
                // 					_this.$http.post(SURL + '/jfd/shopOrders/payOrders', _josn, {
                // 						emulateJSON: true
                // 					}).then(function (res) {
                // 						console.log(res.body.msg);
                // 						if (res.body.code == 0) {
                // 							alert('支付成功')
                // 							window.location.href = 'index/index.html'
                // 						} else {
                // 							alert(res.body.msg)
                // 							window.location.href = 'personal/myorder.html'
                // 						}
                // 					})
                // 				}
                // 			};
                // 		}
                // 	});
                // 	$(".nub_ggg li .zf_del").click(function () {
                // 		if (i > 0) {
                // 			i--
                // 			$(".mm_box li").eq(i).removeClass("mmdd");
                // 			$(".mm_box li").eq(i).attr("data", "");
                // 		}
                // 	});
                // 	$(".nub_ggg li .zf_empty").click(function () {
                // 		$(".mm_box li").removeClass("mmdd");
                // 		$(".mm_box li").attr("data", "");
                // 		i = 0;
                // 	});
            })

        },
        methods: {


            //tjdd: function () {
            // $('.ftc_wzsf').hide();
            // if (localStorage.getItem('addressId')) {
            // 	var _paramStr = JSON.stringify(this.list);
            // 	var addressId = $('.placeOrder_address').attr('address')
            // 	var _josn = {
            // 		userId: localStorage.getItem('userId'),
            // 		userAddressId: addressId,
            // 		paramStr: _paramStr,
            // 		type: 1
            // 	}
            // 	this.$http.post(SURL + '/jfd/shopOrders/addOrders', _josn, {
            // 		emulateJSON: true
            // 	}).then(function (res) {
            // 		var _data = res.body.data;
            // 		if (res.body.code != 0) {
            // 			alert(res.body.msg);
            // 			window.location.href='shopcar/indexShop.html'
            // 		} else {
            // 			sessionStorage.setItem('ddh', _data);
            // 			$('.ftc_wzsf').hide();
            // 		}
            // 	})
            // } else {
            // 	alert('请添加收货地址')
            // }
            //}
            //出现浮动层
            TJ_btn: function () {
                let _this = this
                if (localStorage.getItem('addressId')) {
                    var paramStr = JSON.stringify(this.list);
                    var addressId = $('.placeOrder_address').attr('address')
                    //银行接口
                    var josn = {
                        userId: localStorage.getItem('userId'),
                        userAddressId: addressId,
                        paramStr: paramStr,
                        type: 1
                    }
                    this.$http.post(SURL + '/api/xlsshoporders/addOrders', josn, {emulateJSON: true}).then(res => {
                        if(res.body.status == 1){
                            localStorage.setItem('orderunique', res.body.data.orderunique);
							console.log("收到的订单号：" + res.body.data.orderunique);
                            _this.orderunique = res.body.data.orderunique;
							_this.BankList = res.body.data.usersBankcardsList
							console.log(_this.BankList);
                            $('.footerMask').css({display: 'block'})
						}else {
                            alert(res.body.msg)
						}
                    })
                } else {
                    alert('请添加收货地址')
                }
            },
            footerMaskIte(index,id){
                console.log(index);
                console.log(id);
                this.bankCardId = id
                this.currentTab = index
            },
            close: function () {
                $(".footerMask").hide();
                $(".mm_box li").removeClass("mmdd");
                $(".mm_box li").attr("data", "");
                i = 0;
            },
            btn_zf: function () {
                if(this.bankCardId==-1){
            		var obj = {
                        orderunique: this.orderunique,
                        payType:'1',
                        bankCardId: this.bankCardId,
                        userId: localStorage.getItem('userId'),
                	}
                }else if(this.bankCardId==0){
                	var obj = {
                        orderunique: this.orderunique,
                        payType:'2',
                        bankCardId: this.bankCardId,
                        userId: localStorage.getItem('userId'),
                	}
				}else {
                    var obj = {
                        orderunique: this.orderunique,
                        payType:'3',
                        bankCardId: this.bankCardId,
                        userId: localStorage.getItem('userId'),
                    }
				}
				console.log("发送的订单号：" + obj.orderunique);
                localStorage.setItem('bankCardId',this.bankCardId)
				if(this.btn==1){
				this.btn=2;
				           this.$http.post(SURL + '/api/xlsshoporders/thirdPayApply',obj , {emulateJSON: true}).then(res => {
                    console.log(res);
                    if(res.body.status!=undefined){
					this.btn=1;
					console.log(this.btn)
                        localStorage.setItem('data',res.body.data.orderString)
						if(res.body.status==1){
							if(obj.payType == 2){
								if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
									window.location.href = "iospay" + "," +res.body.data.orderString;
								} else if (/(Android)/i.test(navigator.userAgent)) {
									window.android.aliPay(res.body.data.orderString)
								}
							}else if(obj.payType == 1){
								if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
									var iosJson=JSON.stringify(res.body.data.orderString);
									
									window.location.href = "ioswxpay" + "|" +iosJson;
								} else if (/(Android)/i.test(navigator.userAgent)) {
									
									var sign = res.body.data.orderString.sign;
									var noncestr = res.body.data.orderString.nonce_str;
									var packageX = res.body.data.orderString.package;
									var appid = res.body.data.orderString.appid;
									var prepayid = res.body.data.orderString.prepay_id;
									var partnerid = res.body.data.orderString.mch_id;
									var timestamp = res.body.data.orderString.timestamp;
									window.android.wxPay(appid,noncestr,packageX,partnerid,prepayid,sign,timestamp)
								}
							}else {
								window.location.href='./payCode.html'
							}
						}else{
							alert(res.body.msg)
						}
					}else {
                        alert(res.body.msg)
					}
                })
				
				}
     

            },
        }
    })

	function payResult() {
        location.href = 'personal/myorder.html?ling=2'
    }
    function payFinish() {
        location.href = 'personal/myorder.html?ling=2'
    }


</script>
<script>
	$('.placeOrder_address').click(function () {
		// console.log(123);
		location.href = 'personal/address.html'
		localStorage.setItem('inTo', 1)
	})
</script>

</html>
